<template>
  <Layout>
    <div v-if="payoutList.length!==0">
      <Chart
        :chart-list="payoutChartData"
        :type.sync="type"
        :tagText.sync="tagText"
      ></Chart>
      <div class="details">
        <div class="title">
        <span class="icon-wrapper" :class="type==='+'?'income':''">
          <Icon :name="tagClassResult.tag.name" class="icon"></Icon>
        </span>
          <span class="note">{{tagClassResult.tag.text}}{{`&nbsp;&nbsp;`+percent}}</span>
          <span class="sum">{{`${type==='-'?'-':''}`+tagClassResult.sum.toFixed(2)}}</span>
        </div>
        <div class="title2">{{tagClassResult.tag.text+'消费排行榜'}}</div>
        <ul>
          <li v-for="(item, index) in tagClassResult.items" :key="index">
            <span class="rank">{{index+1}}</span><span
            class="info">{{item.notes!==''?item.notes:item.tag.text}}</span><span>{{item.amount.toFixed(2)}}</span>
          </li>
        </ul>
      </div>
    </div>
    <div v-else class="noResult">
      {{`-本月没有支出记录哦-`}}
    </div>
  </Layout>
</template>

<script lang="ts">
  import Vue from 'vue';
  import {Component, Watch} from 'vue-property-decorator';
  import Chart from '@/components/Chart.vue';
  import clone from '@/lib/clone';

  type ResultItem = { tag: Tag; sum: number; items: RecordItem[] }

  @Component({
    components: {Chart}
  })
  export default class Statistic extends Vue {
    beforeCreate() {
      this.$store.commit('initLayoutData');
      this.$store.commit('initRecordList');
    }

    get interval() {
      return this.$store.state.layoutData.interval;
    }

    @Watch('interval')
    onIntervalChanged(){
      this.tagText = (this.type === '-' && this.payoutList.length !== 0) ? this.payoutList[0].tag.text : '';
    }

    type = '-';

    recordList = this.$store.state.recordList;

    get groupList() {
      const {recordList} = this;
      if (recordList.length === 0) return [];

      const newRecordList: RecordItem[] = clone(recordList)
        .filter((r: RecordItem) => r.createdAt?.startsWith(this.$store.state.layoutData.interval))
        .sort((a: RecordItem, b: RecordItem) => b.amount - a.amount);

      if (newRecordList.length === 0) return [];

      let inSum = 0;
      let outSum = 0;

      for (let i = 0; i < newRecordList.length; i++) {
        (newRecordList[i].type === '-') && (outSum += newRecordList[i].amount);
        (newRecordList[i].type === '+') && (inSum += newRecordList[i].amount);
      }

      this.$store.state.layoutData.payoutSum = outSum;
      this.$store.state.layoutData.incomeSum = inSum;

      return newRecordList;
    }


    formatList(list: RecordItem[]) {
      if (list.length === 0) return [];

      const result: ResultItem[] = [
        {tag: list[0].tag, sum: list[0].amount, items: [list[0],]},
      ];

      for (let i = 1; i < list.length; i++) {
        let index = -1;
        for (let j = 0; j < result.length; j++) {
          if (result[j].tag.id === list[i].tag.id) {
            index = j;
            break;
          }
        }
        if (index === -1) {
          result.push({tag: list[i].tag, sum: list[i].amount, items: [list[i],]});
        } else {
          result[index].sum += list[i].amount;
          result[index].items.push(list[i]);
        }
      }
      return result;
    }

    get incomeList() {
      return this.formatList(this.groupList.filter((item: RecordItem) => item.type === '+'));
    }

    get payoutList() {
      return this.formatList(this.groupList.filter((item: RecordItem) => item.type === '-'));
    }


    chartList(list: ResultItem[]) {
      const arr: { name: string; value: number }[] = [];
      list.forEach((item: ResultItem) => {
        arr.push({value: item.sum, name: item.tag.text});
      });
      return arr;
    }

    get incomeChartData() {
      return this.chartList(this.incomeList);
    }

    get payoutChartData() {
      return this.chartList(this.payoutList);
    }

    tagText = (this.type === '-' && this.payoutList.length !== 0) ? this.payoutList[0].tag.text : '';

    get tagClassResult() {
      const list = this.payoutList;
      return list.filter(item => item.tag.text === this.tagText)[0];
    }

    get percent() {
      const typeSum = this.type === '+' ? this.$store.state.layoutData.incomeSum : this.$store.state.layoutData.payoutSum;
      const floatNumber = 100 * (this.tagClassResult.sum / typeSum);
      return floatNumber.toFixed(1) + '%';
    }
  }
</script>

<style lang='scss' scoped>
  @import "~@/assets/style/helper.scss";

  .details {
    background-color: white;

    > .title {
      display: flex;
      align-items: center;
      margin-left: 10px;
      border-bottom: 1px solid #E6E6E6;
      //@extend %item;
      > .icon-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 2em;
        height: 2em;
        border-radius: 50%;
        color: white;
        background-color: $color-highLight;
        margin: 10px;

        > .icon {
          width: 1.5em;
          height: 1.5em;
        }

        > .income {
          background-color: #BABABA;
        }
      }

      > .note {
        flex-grow: 1;
      }

      > .sum {
        color: #999999;
        margin-right: 10px;
      }
    }

    > .title2 {
      display: flex;
      align-items: flex-end;
      font-size: 12px;
      padding-top: 16px;
      margin-left: 10px;
      color: #999999;
    }

    > ul {
      margin-left: 10px;

      > li {
        display: flex;
        color: #999999;
        padding: 5px 10px 5px 0;

        > .info {
          color: #333333;
          padding: 0 5px;
          flex-grow: 1;
        }
      }

      :nth-child(1), :nth-child(2), :nth-child(3) {
        > span.rank {
          color: #F86808;
        }
      }
    }
  }

  .noResult {
    color: #999;
    text-align: center;
    padding: 16px;
  }
</style>